<template>
  <div class="wrap">
    <div id="main" ref="mainRef">
      <div id="bar" ref="resizeYRef"></div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.handleYResize()
  },
  methods: {
    handleYResize(minHeight = 50, maxtHeight = 550) {
      console.log(minHeight, maxtHeight)

      const mainDom = this.$refs.mainRef
      const resizeDom = this.$refs.resizeYRef

      let startY = 0
      let startHeight = mainDom.offsetHeight
      resizeDom.onmousedown = (e) => {
        startY = e.clientY
        document.onmousemove = (e) => {
          const moveY = e.clientY
          const result = startHeight + (startY - moveY)
          if (result < minHeight || result > maxtHeight) {
            return
          }
          mainDom.style.height = result + 'px'
        }
        document.onmouseup = () => {
          document.onmousemove = null
          document.onmouseup = null
          startHeight = mainDom.offsetHeight
          resizeDom.releaseCapture && resizeDom.releaseCapture()
        }
        resizeDom.setCapture && resizeDom.setCapture()
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  position: relative;
}
#main {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #eee;
  width: 300px;
  height: 400px;
}
#bar {
  width: 100%;
  height: 2px;
  background: #ccc;
  cursor: s-resize;
}
</style>
